import Vue from 'vue'

// 1.1导入路由模块
import VueRouter from 'vue-router'
// 1.2安装路由
Vue.use(VueRouter)
// 1.3导入自己的router.js模块路由
import router from './router.js'

// 导入mint-ui组件
import Mint from 'mint-ui'
Vue.use(Mint)
import 'mint-ui/lib/style.css'

// 导入mui
import './lib/mui/css/mui.css'
// 导入mui拓展字体图标的样式(购物车)
import './lib/mui/css/icons-extra.css'

//安装图片预览插件
import VuePreview from 'vue-preview'
Vue.use(VuePreview)


// 导入格式化时间插件，moment.js
import moment from 'moment'
// 定义全局过滤器
Vue.filter('dateFromat',function(dataStr,pattern="YYYY-MM-DD HH:mm:ss"){
   return moment(dataStr).format(pattern);
})


// 导入axios 他不是vue的插件不能通过use来安装。
import axios from 'axios'
// 全局配置请求的根路径
axios.defaults.baseURL = 'http://www.liulongbin.top:3005';
// 全局设置post时候表单数据格式 组织结构 application/x-www-form-urlencoded
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 注册vuex
import Vuex from 'vuex'
Vue.use(Vuex)
// 每次进入网站肯定会调用main.js，在刚调用的时候先从本地存储中 把购物车的数据读出来，放到我们的storage中
var car = JSON.parse(localStorage.getItem('car') || '[]')


var store= new Vuex.Store({
   state:{// this.$store.state.**
      //将购物车中的商品数据，用一个数据存放，在car数组中，存储一些商品的对象，咱们可以暂时，讲这个商品对象设计成：
      //{id：商品id,cout:购买数量,price:商品单价,selected:false 是否被选中} 
      // car:[]
      car: car
      
   },
   mutations:{//this.$store.commit('方法名'，'按需传递唯一的参数')   
      addToCar(state,goodsinfo){
         //点击加入购物车，把商品的信息，保存到store中的car上！
         //分析：
         //1.如果购物车中，之前就已经有这个对应的商品了，那么只需要更新数量。
         //2.如果没有，则直接把商品push到car中。

         //准备：假设在购物车中没有找到对应的商品  创建一个flag 代表有无！
         var flag=false;

         //第一种情况： 现在我们认为购物车里面有数据！用some去找里面的东西，找到就停止了,用return终止后续循环。
         state.car.some(item=>{
            if(item.id==goodsinfo.id){
               item.count+=parseInt(goodsinfo.count);
               flag=true
               return true
            }
         })
         //如果最终循环完毕的到flag还是false,则直接把商品push 到购物车中！也就是开启情况二
         //第二种情况：如果flag=false 就把传过来的goodsinfo push 到 state 的car数组中
         if(!flag){
            state.car.push(goodsinfo)
         }
         //当car更新后，把car数组存储到本地的localstorage中
         localStorage.setItem('car',JSON.stringify(state.car))
      },
      updateGoodsInfo(state,goodsinfo){
         // 修改购物车中商品的数量值
         state.car.some(item=>{
            if(item.id==goodsinfo.id){
               item.count=parseInt(goodsinfo.count)
               return true
            }
         })
         localStorage.setItem('car',JSON.stringify(state.car))
      },
      removeFormCar(state,id){
         // 根据ID，从store中的购物车中删除对应的那商品数据。
         state.car.some((item,i)=>{
            if(item.id==id){
               state.car.splice(i,1)
               return true
            }
         })
         // 将删除完毕后，最新的购物车数据，同步到本地储存
         localStorage.setItem('car',JSON.stringify(state.car))
      },
      updataGoodsSelceted(state,info){
         // 开关状态的存储
         state.car.some((item,i)=>{
            if(item.id==info.id){
               item.selected=info.selected
            }
         })
         localStorage.setItem('car',JSON.stringify(state.car))
      }
   },
   getters:{//this.$store.getters.***
      //相当于计算属性，也相当于filters
      getAllCount(state){
         var c=0;//总数量默认为0
         state.car.forEach(item=>{
            c+=item.count;
         })
         return c
      },
      getGoodsCount(state){
         //用来返回购物车 加减里面的空数字！
         var o={}
         state.car.forEach(item=>{
            o[item.id]=item.count   
         })
         return o;
      },
      getGoodsSelected(state){
         //把vuex 里面的数据的状态返回给前台页面
         var o={}
         state.car.forEach(item=>{
            o[item.id]=item.selected
         })
         return o
      },
      getGoodsCountAndAmount(state){
         //实现勾选数量和总价的自动计算
         var o={
            count:0,//勾选的数量
            amount:0//勾选的总价
         }
         state.car.forEach(item=>{
            if(item.selected){
               o.count+=item.count
               o.amount+=item.price*item.count
            }
         })
         return o
      }  
   } 
})


// 导入app跟组件
import app from './app.vue'
var vm=new Vue({
    el:'#app',
    render:c=>c(app),
    router,//1.4挂载路由对象到Vm实例上。
    store
})

